// 在Vue3中，可以使用directive函数创建一个自定义指令。directive函数需要传入两个参数，第一个参数是指令名称，第二个参数是指令对象，其中包含bind、update、unbind等生命周期函数。

import { directive } from 'vue'

const myDirective = directive('my-directive', {
  mounted(el, binding) {
    // 在元素挂载时调用
  },
  updated(el, binding) {
    // 在元素更新时调用
  },
  unmounted(el, binding) {
    // 在元素卸载时调用
  }
})

export default myDirective


app.directive('directiveName', {
  // 在绑定元素的 attribute 或事件监听器被应用之前调用, 在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用
  created() {},
  // 当指令第一次绑定到元素并且在挂载父组件之前调用
  beforeMount() {},
  // 在绑定元素的父组件被挂载后调用
  mounted() {},
  // 在更新包含组件的 VNode 之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新后调用
  updated() {},
  // 在卸载绑定元素的父组件之前调用
  beforeUnmount() {},
  // 当指令与元素解除绑定且父组件已卸载时, 只调用一次
  unmounted() {},
});

// 写过自定义指令吗？原理是什么？
// 指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素添加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。
// 自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

// 1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
// 2、inserted：被绑定元素插入父节点时调用。
// 3、update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较前后的绑定值。
// 4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
// 5、unbind：只调用一次，指令与元素解绑时调用。
